<template>




  <van-field v-if="isShow" :label-width="150" :clearable="true" :type="type" :rows="rowNum" v-model="itemValue"
    :maxlength="maxlength" :placeholder="placeholder" :show-word-limit="showWordLimit" :error-message="errorMessage"
    @click="handleClick" @input="handleInput" @blur="handleBlur" @focus="handleFocus">
    <template #label>
      <div @click.stop="handleSelectField(formItemIndex)" class="field-select-box">
        <span v-if="formItem.sTitle">{{ formItem.sTitle }}</span>
        <span v-else style="color:#909399">请选择字段</span>


        <i class="iconfont icon-zhankai" style="margin-left:5px;margin-right:5px;color:#909399"></i>
      </div>
    </template>
    <template #input v-if="selectType.indexOf(formItem.sUIType) !== -1 || (sFormat === 'star')">

      <!-- 上传 -->
      <template v-if="uploadType.indexOf(formItem.sUIType) !== -1">

        <van-uploader v-if="sFormat === 'refer:only-camera'" v-model="formValueList" multiple :after-read="handleUpload"
          accept="image/*" capture="camera" :disabled="disabled">
          <template #preview-cover="{ file }">
            <div class="preview-cover van-ellipsis" @click.stop="handleDownload(file.name)">下载文件</div>
          </template>
        </van-uploader>

        <van-uploader v-else v-model="formValueList" multiple :after-read="handleUpload" accept="*"
          :disabled="disabled">
          <template #preview-cover="{ file }">
            <div class="preview-cover van-ellipsis" @click.stop="handleDownload(file.name)">下载文件</div>
          </template>
        </van-uploader>
      </template>


      <!-- 评价 -->
      <template v-else-if="sFormat === 'star'">
        <van-rate v-model="numberItemValue" :size="24" color="#ffd21e" void-icon="star" void-color="#eee" />

      </template>








      <div v-else>
        <span v-if="itemValue">{{ itemValue }}</span>
        <span v-else style="color:#c9cacd">{{ placeholder }}</span>
      </div>
    </template>
    <template #right-icon>
      <div  style="display: flex;align-items: center; justify-content: flex-end;">
        <van-icon v-if="isShowArrow" size="14" name="arrow" />
        <i class="iconfont icon-shanchu9 L-big-text" @click.stop="handleDeleteCorrectionField(formItemIndex)"
          style="color:#F56C6C;margin-left:10px"></i>        
      </div>
    </template>

  </van-field>










  <!-- 参照弹窗 -->
  <van-popup v-model:show="showeRefPopup" position="bottom" style="width:100%;height:90%" round>
    <template v-if="showeRefPopup">
      <OrgRef v-if="formItem.idJoinObject === 'dep' || formItem.idJoinObject === 'employee'" :refParams="refParams"
        :refObject="formItem.idJoinObject" :handleRefClick="handleRefClick" :handleRefCancle="handleRefCancle"
        :refMode="formItem.sUITypeExp"></OrgRef>
      <Ref v-else :refParams="refParams" :refObject="formItem.idJoinObject" :handleRefClick="handleRefClick"
        :handleRefCancle="handleRefCancle" :refMode="formItem.sUITypeExp"></Ref>
    </template>
  </van-popup>

  <!-- 枚举弹窗 -->
  <van-popup v-model:show="showeEnumPopup" position="bottom">
    <van-picker v-if="sUITypeExp === 'normal'" title="请选择" :columns="enumArr" @cancel="showeEnumPopup = false"
      @confirm="onConfirm" />

    <div v-else style="width:100%;height:50vh;padding:20px">

      <div class="L-text L-text-align-center">请选择</div>
      <van-row :gutter="20" class="L-margin-top-20">
        <van-col :span="8" v-for="(item, index) in enumArr" :key="index">
          <div class="L-tag" :class="item.selected ? 'L-tag-selected' : ''" @click="item.selected = !item.selected">
            {{ item.text }}
          </div>
        </van-col>
      </van-row>

      <div class="L-bottom-row">
        <van-button round type="primary" style="width:80%" @click="onMultipleEnumConfirm">确定</van-button>
      </div>

    </div>
  </van-popup>

  <!-- 日期弹窗 -->
  <van-popup v-model:show="showDatePopup" position="bottom">

    <van-date-picker v-model="currentDateArr" title="选择日期" :columns-type="dataColumnsType" :min-date="minDate"
      :max-date="maxDate" @confirm="onConfirm" />
  </van-popup>

  <van-popup v-model:show="showTimePopup" position="bottom">
    <van-time-picker v-model="currentTimeArr" title="选择时间" :columns-type="['hour', 'minute', 'second']"
      @confirm="onConfirm" />
  </van-popup>

  <!-- <van-popup v-model:show="showDatePopup" position="bottom">

    <van-date-picker v-model="currentDateArr" title="请选择" :columns-type="dataColumnsType" :min-date="minDate"
      :max-date="maxDate" @confirm="onConfirm" />
  </van-popup> -->

  <!--布尔弹窗 -->
  <van-popup v-model:show="showeBoolPopup" position="bottom">
    <van-picker title="请选择" :columns="boolArr" @cancel="showeBoolPopup = false" @confirm="onConfirm" />
  </van-popup>

  <!-- 数字键盘 -->
  <van-number-keyboard :show="showNumberKeyboard" :extra-key="showPoint ? '.' : ''" @blur="showNumberKeyboard = false"
    @input="handleClickNumberKeyBoard" @delete="handleClickNumberKeyBoardDelete" theme="custom"
    close-button-text="完成" />


  <!--refer弹窗  -->
  <!-- <van-action-sheet v-model:show="showReferSheet" :actions="referArr" @select="handleReferSelect"
    @cancel="showReferSheet = false" cancel-text="取消" /> -->

  <div v-if="showSelectLayer" class="L-input-select-layer" :style="{ top: pageTop }">
    <div class="L-select-layer-item" v-for="(item, index) in referArr" :key="index" @click="handleSelect(item)">
      <i class="iconfont icon-radio" style="margin-right:5px"></i> <span>{{ item.rtitle }}</span>
    </div>




  </div>

</template>

<script setup lang="ts">
import insterPointFuncObj from "@/function/insterPointFunc"
import { showLoadingToast, closeToast, showToast } from "vant";
import type { FieldType, DatePickerColumnType, ActionSheetAction, PopoverAction } from "vant"
import emitter from "@/utils/emitter";
import { defineProps, defineEmits, ref, onActivated, watch, provide, onMounted, watchEffect, computed, } from "vue";
import Ref from "../Ref/Ref.vue";
import OrgRef from "../Ref/OrgRef.vue";
import { apiConfigurable } from "@/request/api/api";

import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

import { useRefStore } from "@/stores/ref";

const refStore = useRefStore();



const props = defineProps({
  formItem: {
    type: Object,
    default: null,
  },
  formItemIndex: {
    type: Number,
    default: 0,
  },
  handleSelectErrorCorrectionField: {
    type: Function,
    default: () => { },
  },
  handleSelectField: {
    type: Function,
    default: () => { },
  },
  handleDeleteCorrectionField: {
    type: Function,
    default: () => { },
  },
  handleChange: {
    type: Function,
    default: () => { },
  },
  disableControlField: {
    type: String,
    default: "lCanInput",
  },
  scene: {
    type: String,
    default: "form",
  },
  mapData: {
    type: Object,
    default: {
      lat: 39.907503,
      lng: 116.419936,
    },
  },
  tableType: {
    type: String,
    default: "head",
  },
  bodyDataName: {
    type: String,
    default: "",
  },
  bodyDataIndex: {
    type: String,
    default: "",
  },
  handleShowNumberKeyboardSpace: {
    type: Function,
    default: () => { },
  },



  jsondata: {
    type: Object,
    default: null,
  },
  inputStyle: {
    type: String,
    default: "v1",
  },
  handleSelectedSlor: {
    type: Function,
    default: () => { },
  },
});

const arrowType = ["ref", "enum", "datetime", "date", "bool"];
const uploadType = ["picture", "file"];
const selectType = [...arrowType, ...uploadType];

const numberType = ["double", "money", "int"];
const boolArr = [
  { text: "是", value: "是" },
  { text: "否", value: "否" },
];



// const emits = defineEmits(["handleChange", "getDistance", "handleClear"]);

const itemValue = ref<string | number>("");
const itemId = ref("");
const formValueList = ref([]); //上传类型
const formValueId = ref("");
const fileList = ref([]);
itemValue.value = props.formItem.value;
const numberItemValue = computed({
  get() {
    return Number(itemValue.value)
  },
  set(newValue) {
    itemValue.value = String(newValue)


  }
})

if (uploadType.indexOf(props.formItem.sUIType) !== -1) {
  formValueList.value = props.formItem.valuelist;
}

const errorMessage = ref<string>(props.formItem.errorMessage || "")

import { useEventFunc } from "@/function/eventFunc"
const eventFuncObj = useEventFunc()
watch(itemValue, (value) => {
  //错误信息
  if (value) {
    errorMessage.value = ""
  }
})

const disabled = ref(false);
const required = ref(false);
const isShow = ref(true);
const type = ref<FieldType>("text");
const rowNum = ref(1);
const maxlength = ref(500);
const enumArr = ref([]);
const showWordLimit = ref(false);
const showPoint = ref(true);

const minDate = new Date(2012, 0, 1);
const maxDate = new Date(2030, 1, 31);

const showeRefPopup = ref(false);
watch(showeRefPopup, (value) => {
  if (!value) {
    refParams.value.inview = ""
  }

})
const showDatePopup = ref(false);
const showTimePopup = ref(false);
const showeEnumPopup = ref(false);
const showeBoolPopup = ref(false);
const showNumberKeyboard = ref(false);
const showReferSheet = ref(false)
const showReferPopover = ref(false)
const showSelectLayer = ref(false)
const refParams = ref({
  object: props.formItem.idJoinObject,
  toobject: props.formItem.idObject,
  field: props.formItem.sField,
  sRefKey: props.formItem.sRefKey,
  classname: props.formItem.classname,
  params: "",
  inview: ""
});



//是否可编辑的控制字段判断
// const disableControlField = props.disableControlField
if (props.disableControlField === 'lCanInput') {
  disabled.value = props.formItem.lCanInput === "0" ? true : false;
} else if (props.disableControlField === 'sEditable') {
  disabled.value = props.formItem.sEditable === "false" ? true : false;
}


const placeholder = ref("");
// placeholder.value = disabled.value ? "系统自动填充" : "请输入" + props.formItem.sTitle;
placeholder.value = "请输入"



if (props.formItem.lMustInput) {
  required.value = props.formItem.lMustInput === "0" ? false : true;
}
if (props.formItem.lCanOutput) {
  isShow.value = props.formItem.lCanOutput === "0" ? false : true;
}

const sUITypeExp = ref("");
const sUIType = ref("");
const sFormat = ref("");
const currentDateArr = ref<string[]>([]);
const currentTimeArr = ref<string[]>([]);




const dataColumnsType = ref<DatePickerColumnType[]>(['year', 'month', 'day']);
// const referArr = ref<ActionSheetAction[]>([])
const referArr = ref<PopoverAction[]>([])

const isShowArrow = computed(() => {
  if (selectType.indexOf(sUIType.value) !== -1) {
    return true
  }
})
watch(() => props.formItem, (val) => {

  sUITypeExp.value = props.formItem.sUITypeExp;
  sUIType.value = props.formItem.sUIType;
  sFormat.value = props.formItem.sFormat;
  rowNum.value = 1

  switch (sUIType.value) {
    case "string":
      type.value = sUITypeExp.value == "long" || sUITypeExp.value == "big" ? "textarea" : "text";
      showWordLimit.value = type.value === "textarea" ? true : false;
      rowNum.value = sUITypeExp.value == "long" || sUITypeExp.value == "big" ? 2 : 1;
      maxlength.value = parseInt(props.formItem.lLength || 500);
      break;

    case "int":
      type.value = "digit";
      break;



    case "double":
      type.value = "number";
      break;


    case "url":
      if (sUITypeExp.value === "mobilephone") {
        type.value = "tel";
      }
      break;

    case "datetime":
      // let now = itemValue.value == "" ? getCurrentTime(sUITypeExp.value, "") : itemValue.value;
      // // console.log("type",getCurrentTime(sUITypeExp.value, ""))
      // // console.log("now",now)

      // if (sUITypeExp.value === "short") {
      //   currentDateArr.value = now.split("-");
      //   currentTimeArr.value = now.split(":");
      // } else {
      //   currentDateArr.value = now.split(" ")[0].split("-");
      //   currentTimeArr.value = now.split(" ")[1].split(":");
      // }

      break;

    case "map":
      type.value = "textarea";
      rowNum.value = 3;
      break;
    case "ref":
      refParams.value.object = props.formItem.idJoinObject
      refParams.value.toobject = props.formItem.idObject
      refParams.value.field = props.formItem.sField
      refParams.value.sRefKey = props.formItem.sRefKey
      refParams.value.classname = props.formItem.classname

      break;
  }


}, {
  deep: true
})









showPoint.value = props.formItem.sUIType == "int" ? false : true;
let timer = null

function handleInput(e) {

  // 事件函数处理
  const { event } = props.formItem
  const { jsondata, tableType, bodyDataIndex, bodyDataName } = props
  if (event && Array.isArray(event)) {
    if (event.length > 0) {
      event.forEach((item, index) => {
        eventFuncObj.parseEventSource(item.eventSource, jsondata, tableType, bodyDataIndex, bodyDataName)
      })

    }
  }



  //业务特判===========================
  if (!timer) {
    timer = setTimeout(() => {
      timer = null
      handleSearchAccount()
    }, 1000)
  }




}
function handleClick(e) {


  // if (disabled.value === true) {
  //   return;
  // }

  pageTop.value = e.pageY
  showSelectLayer.value = false;


  // 插入点函数
  const jsfunc = props.formItem?.jsfunc
  const idObject = props.formItem.idObject
  if (jsfunc && insterPointFuncObj[jsfunc.slice(0, -2)]) {
    const insterPointFuncRes = insterPointFuncObj[jsfunc.slice(0, -2)](props.jsondata, idObject)
    if (!insterPointFuncRes) {
      return
    } else {
      refParams.value.params = insterPointFuncRes
    }
  }


  const { formItem, tableType, jsondata, bodyDataName, bodyDataIndex } = props;

  //字符串
  if (sUIType.value === "string") {


    if (sFormat.value === "yearmonth;") {
      dataColumnsType.value = ['year', 'month']
      const nowtime = itemValue.value == "" ? getCurrentTime("", "yearmonth") : itemValue.value;
      currentDateArr.value = nowtime.split("-")
      showDatePopup.value = true
    }

    if (sFormat.value.indexOf("refer") !== -1) {
      const content = getContentBetween(sFormat, "refer:", ";")
      referArr.value = content.split(",").map((item: string) => {
        return { rtitle: item }
      })


      showSelectLayer.value = true
    }


  }

  // 枚举
  if (sUIType.value === "enum") {
    showeEnumPopup.value = true;
    const enumIdArr = props.formItem.allenumid
      .split(";")
      .filter((item) => item);

    enumArr.value = props.formItem.allenumval
      .split(";")
      .filter((item) => item)
      .map((item, index) => {
        return { text: item, value: item, id: enumIdArr[index] };
      });
  }

  // 日期时间
  if (sUIType.value === "datetime") {
    showDatePopup.value = true;
  }

  // 日期时间
  if (sUIType.value === "date") {
    showDatePopup.value = true;
  }

  // 参照
  if (sUIType.value === "ref") {

    // 字段约束
    let inview = formItem.inview
    if (inview) {
      let arrinview = inview.split(';')
      for (let inviewindex in arrinview) {
        let arrinviewdata = arrinview[inviewindex]
        let inviewdatas = arrinviewdata.split(':')
        if (inviewdatas[1] === 'eq') {
          if (tableType === 'head') {
            for (let groupindex in jsondata.head) {
              for (let itemindex in jsondata.head[groupindex].groupvalue) {
                let item = jsondata.head[groupindex].groupvalue[itemindex]
                if (item.sField === inviewdatas[2].split('_')[2]) {
                  // refParams.value.inview += inviewdatas[0] + ':eqref:' + item.valuehidden + ';'
                  refParams.value.inview += inviewdatas[0] + ':eqref:' + item.valuehidden + ';'
                }
              }
            }
          } else if (tableType === 'body') {
            for (let itemindex in jsondata.bodydata[bodyDataName][bodyDataIndex]) {
              let item = jsondata.bodydata[bodyDataName][bodyDataIndex][itemindex]
              if (item.sField === inviewdatas[0]) {
                refParams.value.inview += inviewdatas[0] + ':eqref:' + item.valuehidden + ';'
              }
            }
          }
        } else if (inviewdatas[0] === 'sname' && inviewdatas[1] === 'in') {
          refParams.value.inview += `${inviewdatas[0]}:${inviewdatas[1]};`;
        } else if (inviewdatas[1] === 'in') {
          refParams.value.inview += inviewdatas[0] + ':in:' + formItem.value + ';'
        }
      }
    }



    showeRefPopup.value = true;
  }

  //布尔
  if (sUIType.value === "bool") {
    showeBoolPopup.value = true;
  }

  //数字
  if (numberType.indexOf(formItem.sUIType) !== -1) {
    // showNumberKeyboard.value = true;
  }
}

function handleBlur() {
  // showSelectLayer.value = false
}

function handleFocus(e) {
}

function handleSelect(item) {

  itemValue.value = item.rtitle
  showSelectLayer.value = false



  // 业务特判
  const { idObject, sField, value } = props.formItem
  if ((idObject === "account" || idObject === "account1" || idObject === "account2") && sField == 'sname') {
    props.handleSelectedSlor(item)
  }

}

const accountArr = ref([])

function handleSearchAccount() {

  const { idObject, sField, value } = props.formItem
  if ((idObject === "account" || idObject === "account1" || idObject === "account2") && sField == 'sname') {
    showLoadingToast({
      duration: 0, // 持续展示 toast
      forbidClick: true,
      message: "查询中...",
    });



    const api = `${idObject}.querysolr.do`
    const data = {
      sname: value
    }

    showSelectLayer.value = false



    apiConfigurable(api, data).then((res) => {

      if (res.code === 0) {

        if (res.data.jsondata !== 'null') {
          referArr.value = res.data.jsondata.map(item => {
            return { rtitle: item.sname, ...item }
          })
          showSelectLayer.value = true
        }
        closeToast()

      }

    });

  }

}



const pageTop = ref(0)





function getCurrentTime(type: string = "", format: string = "") {
  const currentTime = new Date();
  const year = currentTime.getFullYear();
  const month = currentTime.getMonth() + 1; // 月份从0开始，因此需要加1
  const day = currentTime.getDate();
  const hours = currentTime.getHours();
  const minutes = currentTime.getMinutes();
  const seconds = currentTime.getSeconds();
  console.log("type",type)

  if (type) {
    // debugger
    return type === "short" ? `${year}-${month}-${day}` : `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  }
  if (format) {
    // debugger
    if (format === "yearmonth") return `${year}-${month}`
  }
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`

}

function getContentBetween(str, startChar, endChar) {
  const regex = new RegExp(`${startChar}([^${endChar}]+)${endChar}`);
  const match = str.match(regex);
  return match ? match[1] : ''; // 返回匹配的内容，如果没有找到，返回空字符串
}



let timeFlag = ref(false);
function onConfirm({ selectedOptions, selectedValues }) {


  // 字符串
  if (sUIType.value === "string" && sFormat.value === "yearmonth;") {
    itemValue.value = selectedValues.join("-");
    currentDateArr.value = selectedValues
    showDatePopup.value = false;
  }

  //枚举类型
  if (sUIType.value === "enum") {
    itemValue.value = selectedValues[0];
    itemId.value = selectedOptions[0].id;
    showeEnumPopup.value = false;
  }

  //日期类型
  if (sUIType.value === "datetime") {
    showDatePopup.value = false;
    // console.log("*****", timeFlag.value);
    if (sUITypeExp.value === "short") {
      itemValue.value = selectedValues.join("-");
    } else {
      if (timeFlag.value === false) {
        itemValue.value = selectedValues.join("-");
        showTimePopup.value = true;
        timeFlag.value = true;
      } else {
        itemValue.value = `${itemValue.value} ${selectedValues.join(":")}`;
        showTimePopup.value = false;
        timeFlag.value = false;
      }
    }
  }

  if (sUIType.value === "date") {
    showDatePopup.value = false;
    itemValue.value = selectedValues.join("-");
  }

  //布尔类型
  if (sUIType.value === "bool") {
    itemValue.value = selectedValues[0];
    showeBoolPopup.value = false;
  }
}

function onMultipleEnumConfirm() {
  itemValue.value = enumArr.value.reduce((pre, item) => {
    if (item.selected === true) {
      return `${pre}${item.text};`;
    } else {
      return pre;
    }
  }, "");

  itemId.value = enumArr.value.reduce((pre, item) => {
    if (item.selected === true) {
      return `${pre}${item.id};`;
    } else {
      return pre;
    }
  }, "");

  showeEnumPopup.value = false;
}

interface refParams {
  id: string;
  title: string;
  address?: string;
  fieldmap?: object;
  mapobject?: string;
}

const fieldmap = ref({}); //映射关心
const mapobject = ref(""); //映射对象

function handleRefClick(item: refParams) {
  itemValue.value = item.title;
  itemId.value = item.id;
  if (item.fieldmap && item.mapobject) {
    fieldmap.value = item.fieldmap;
    mapobject.value = item.mapobject;
  }
  showeRefPopup.value = false;
}

function handleRefCancle() {
  showeRefPopup.value = false;
}


//upload======================
const oldNameStr = ref("")
const newNameStr = ref("")
function handleUpload(file) {

  let deviceFile = [];
  let formData = new FormData();
  if (Array.isArray(file)) {
    deviceFile = file;
  } else {
    deviceFile.push(file);
  }

  for (let i = 0; i < deviceFile.length; i++) {
    formData.append("file" + i, deviceFile[i].file, deviceFile[i].name);
  }
  showLoadingToast({
    duration: 0, // 持续展示 toast
    forbidClick: true,
    message: "上传中...",
  });

  const { sUIType } = props.formItem;

  const api = sUIType === "picture" ? "upload.imagedo" : "upload.filedo";

  apiConfigurable(api, formData).then((res) => {
    if (res.code === 0) {
      closeToast();
      itemValue.value = res.data[0].oldname;
      itemId.value = res.data[0].newname;

      oldNameStr.value += res.data[0].oldname + ";"
      newNameStr.value += res.data[0].newname + ";"
    }

  });
}

function handleDownload(filename) {
  const index = oldNameStr.value.split(";").indexOf(filename)
  const newname = newNameStr.value.split(";")[index]


  if (newname) {
    const url = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ":" + window.location.port : "/");
    window.location.href = `${url}/userfile/default/attach/${newname}`
  }
}

function handleClickNumberKeyBoard(value) {
  itemValue.value = `${itemValue.value}${value}`;
}

function handleClickNumberKeyBoardDelete() {
  itemValue.value = itemValue.value.slice(0, -1);
}



// 监听数据变化
watch(
  itemValue, () => {
    props.handleChange(props.formItem, itemValue.value,itemId.value)
    // emits("handleChange", props.formItem, itemValue.value, itemId.value, fieldmap.value, mapobject.value, props.tableType, props.bodyDataName, props.bodyDataIndex);
  },
  {
    immediate: true,
  }
);

//字段映射监听
watch(
  () => props.formItem.value,
  (value) => {
    itemValue.value = value;
  }
);

//字段联动监听
watch(
  () => props.formItem.lCanInput,
  (value) => {
    disabled.value = props.formItem.lCanInput === "0" ? true : false;
  }
);

watch(
  () => props.formItem.lMustInput,
  (value) => {
    required.value = props.formItem.lMustInput === "0" ? false : true;
  }
);

watch(
  () => props.formItem.lCanOutput,
  (value) => {
    isShow.value = props.formItem.lCanOutput === "0" ? false : true;
  }
);



</script>

<style>
.field-select-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 6px;
  background-color: #f7f8fa;
  box-sizing: border-box;
  padding: 2px 8px;

}

.L-input-select-layer {
  width: 80vw;
  position: absolute;
  z-index: 9999;
  background-color: #fff;
  border-radius: 6px;
  padding: 10px;
  box-sizing: border-box;
  left: 10vw;
  box-shadow: 0 2px 12px rgba(50, 50, 51, .12);
  max-height: 200px;
  overflow: scroll;
}

.L-select-layer-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f9f9f9;
  padding: 10px 0
}

.L-tag {
  width: 100%;
  /* max-width: 70px; */
  /* min-width: 40px; */

  text-align: center;
  padding: 2px 5px;
  background: #f5f7fa;
  border-radius: 4px;
  color: #606266;
  font-size: 12px;
  margin: 0px 5px 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

}

.L-tag-selected {
  background: #1989fa;
  color: #fff;
}

.van-field__body {
  display: flex;
  align-items: flex-end;
}

.vinput-box {
  border-radius: 4px;
  padding: 2px 4px;
  border: 1px solid #E4E7ED;
  display: flex;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.disable-color {
  background-color: #eff0f2;
}

.vinput {
  all: unset;
  /* border:none; */
  width: 90%;
  /* border:1px solid #EBEEF5;
  padding:2px 5px;
  border-radius: 4px; */
}

.vinput::placeholder {
  color: #C0C4CC !important
}

input[disabled],
input:disabled,
input.disabled,
.van-field__control:disabled {
  color: #C0C4CC !important;
  -webkit-text-fill-color: #C0C4CC !important;
  -webkit-opacity: 1 !important;
  opacity: 1 !important;
}

.van-popover__wrapper {
  display: block;
}


</style>